<template>
    <view class="uu-order-item-card" @click.stop="handleView">

        <view class="card-header">
            <view class="car-header-left">
                <text>{{ orderStatusText }}</text>

            </view>
            <view class="car-header-right">
                <view class="store">
                    <view class="img"></view>
                    <text>uu迷你台球</text>
                </view>
                <view class="vip">
                    <view class="img"></view>
                    <text>vip111</text>
                </view>
            </view>
        </view>
        <view class="order-num">
            <text>订单编号CN41731988544</text>
        </view>
        <view class="split"></view>
        <view class="order-content">
            <view class="avatar"></view>
            <view class="order-content-right">
                <view class="top">
                    <view class="name">
                        <text>萱萱</text>
                        <view class="pic"></view>
                    </view>
                    <view class="tel" @click.stop="handlePhone('15638270261')">
                        <view class="pic"></view>
                        <text>点击拨号</text>
                    </view>
                    <view class="money">￥ 58.80</view>

                </view>
                <view class="bottom" v-if="status !== 'reject'">
                    <text>商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1、商务接待 x1</text>
                </view>

            </view>


        </view>
        <view class="order-btn-list">
            <view class="btn-item " v-if="status !== 'pending'" @click.stop="handleComplaint">
                <text>投诉</text>
            </view>
            <view class="btn-item hasColor" v-if="status !== 'pending'" @click.stop="handleDelete">
                <text>删除订单</text>
            </view>
            <view class="btn-item " v-if="status === 'pending'" @click.stop="handleCancel">
                <text>取消订单</text>
            </view>
            <view class="btn-item hasColor" v-if="status === 'pending'" @click.stop="seleteProject">
                <text>选择项目</text>
            </view>
        </view>

        <!-- 取消订单确认弹窗 -->
        <order-dialog v-model:show="showCancelDialog" @confirm="confirm" />

    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";


type statusType = 'pending' | 'fulfilled' | 'reject'
interface OrderItemType {
    id: string | number,
    status: statusType
}

const props = defineProps<{
    orderData: OrderItemType;
}>();

const emit = defineEmits<{
    (e: 'cancel-order', id: string | number): void
}>()

// 弹窗显示状态
const showCancelDialog = ref(false)

// 订单状态
const status = computed(() => {
    return props.orderData.status
})

const orderStatusText = computed(() => {
    return status.value === 'pending' ? '进行中' : status.value === 'fulfilled' ? '已完成' : '已取消'
})

// 进入详情
const handleView = () => {
    uni.navigateTo({
        url: `/pages/order/orderView/orderView?orderNo=${encodeURIComponent(String(props.orderData.id ?? ''))}`
    })
}

// 投诉
const handleComplaint = () => {
    uni.navigateTo({
        url: `/pages/order/complaint/complaint?orderNo=${encodeURIComponent(String(props.orderData.id ?? ''))}`
    })
}

// 删除订单
const handleDelete = () => {
    // #ifdef APP-PLUS
    uni.navigateTo({
        url: `/pages/order/orderView/orderView?orderNo=${encodeURIComponent(String(props.orderData.id ?? ''))}`
    })
    // #endif

    // 非App平台提示
    // #ifndef APP-PLUS
    uni.showToast({
        title: '请前往app中删除订单',
        icon: 'none'
    });
    // #endif

}

// 取消订单 -> 打开自定义弹窗
const handleCancel = () => {
    showCancelDialog.value = true
}

// 选择项目
const seleteProject = () => {
    console.log('选择项目');
    uni.navigateTo({
        url: `/pages/order/project/project?orderNo=${encodeURIComponent(String(props.orderData.id ?? ''))}`
    })
}

// 打电话
const handlePhone = (phone: string) => {
    // 验证电话号码格式
    if (!/^1[3-9]\d{9}$/.test(phone)) {
        uni.showToast({
            title: '电话号码格式不正确',
            icon: 'none'
        });
        return;
    }
    uni.makePhoneCall({
        phoneNumber: phone, //仅为示例，并非真实的电话号码
        success: () => {
            console.log('拨打成功');
        },
        fail: () => {
            console.log('拨打失败');
        }
    });
    // emit('handlePhone', props.infos)
}

// 确认取消订单
const confirm = () => {
    console.log('取消订单');

}

onHide(() => {
    showCancelDialog.value = false
})

</script>

<style lang="less" scoped>
.uu-order-item-card {
    width: 688rpx;
    height: 437rpx;
    padding: 31rpx 30rpx 0 36rpx;
    box-sizing: border-box;
    // background: #FFFFFF;
    // border-radius: 23rpx 23rpx 23rpx 23rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-image: url('/static/common/order_card.png');
    background-size: 100% 100%;
    position: relative;

    .card-header {
        width: 100%;
        height: 42rpx;
        margin-bottom: 15rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .car-header-left {
            width: 108rpx;
            height: 42rpx;
            font-weight: 600;
            font-size: 31rpx;
            color: #333333;
            text-align: left;
        }

        .car-header-right {
            height: 42rpx;
            line-height: 42rpx;
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 23rpx;
            color: #333333;
            gap: 27rpx;

            .store {
                min-width: 160rpx;
                display: flex;
                align-items: center;
                gap: 11rpx;

                .img {
                    width: 25rpx;
                    height: 25rpx;
                    background: url('/static/common/store.png');
                    background-size: 100% 100%;
                }
            }

            .vip {
                min-width: 129rpx;
                display: flex;
                align-items: center;
                gap: 11rpx;

                .img {
                    width: 25rpx;
                    height: 25rpx;
                    background: url('/static/common/vip.png');
                    background-size: 100% 100%;
                }
            }
        }


    }

    .order-num {
        width: 233rpx;
        height: 27rpx;
        margin-bottom: 69rpx;
        font-weight: 400;
        font-size: 19rpx;
        color: #777777;
        text-align: left;

    }

    .order-content {
        width: 100%;
        height: 121rpx;
        margin-bottom: 33rpx;
        display: flex;
        align-items: flex-start;

        .avatar {
            width: 121rpx;
            height: 121rpx;
            border-radius: 50%;
            border: 2rpx solid #b5e489;
            margin-right: 34rpx;
        }

        .order-content-right {
            flex: 1;
            height: 104rpx;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4rpx;

            .top {
                width: 467rpx;
                height: 52rpx;
                line-height: 52rpx;
                display: flex;
                align-items: center;

                .name {
                    width: 107rpx;
                    font-weight: 600;
                    font-size: 29rpx;
                    color: #333333;
                    margin-right: 7rpx;
                    text-align: left;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .pic {
                        width: 21rpx;
                        height: 21rpx;
                        margin-right: 13rpx;
                        background-image: url('/static/common/female.png');
                        background-size: 100% 100%;
                    }
                }

                .tel {
                    width: 129rpx;
                    font-weight: 400;
                    font-size: 23rpx;
                    color: #4196E5;
                    display: flex;
                    align-items: center;

                    .pic {
                        width: 26rpx;
                        height: 26rpx;
                        margin-right: 9rpx;
                        background-image: url('/static/common/tel.png');
                        background-size: 100% 100%;

                    }
                }

                .money {
                    flex: 1;
                    font-weight: 600;
                    font-size: 38rpx;
                    color: #333333;
                    text-align: right;
                }
            }

            .bottom {
                height: 54rpx;
                line-height: 54rpx;
                font-weight: 500;
                font-size: 27rpx;
                color: #333333;
                text-align: left;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }




        }


    }

    .order-btn-list {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 34rpx;

        .btn-item {
            width: 202rpx;
            height: 67rpx;
            line-height: 67rpx;
            text-align: center;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
            border: 2rpx solid #AAAAAA;
            font-weight: 600;
            font-size: 27rpx;
            color: #AAAAAA;

            &.hasColor {
                background: #00E9BF;
                border: 2rpx solid #00E9BF;
                color: #333;


            }
        }
    }

}
</style>
